<template>
	<div class="channel">
		<h1>{{ channel.name }}</h1>
		<el-tabs v-model="activeMaterialId" tab-position="top" @tab-click="choseChannel" :class="searchBarFixed == true ? 'isFixed':''">
			<template v-for="item in channel.materials">
				<el-tab-pane :label="item.name" :name="item.id"></el-tab-pane>
			</template>
		</el-tabs>

		<goods :list="goods" class="m-t-sm"></goods>
		<el-divider id="btm">
			<!-- 自动滚动时显示 -->
			<p v-if="loading">加载中...</p>
			<p v-if="noMore">没有更多了</p>
		</el-divider>

		<pagination :total="total" :pageNo='pageNo' :pageSize='pageSize' @onPageChange="query"></pagination>

	</div>
</template>

<script>
	import Goods from '@/components/Goods.vue'

	var channelBar; //频道栏目元素
	var channelBarWidth; //频道栏目初始化宽度

	export default {
		name: 'Channel',
		components: {
			Goods
		},
		data() {
			return {
				searchBarFixed: false, //固定频道栏目
				total: 300, // 记录总条数
				pageSize: 20, // 每页显示条数
				pageNo: 1, // 当前的页数
				activeMaterialId: null,
				channel: {
					materials: []
				},
				goods: [],
				scrollQuery: false,
				loading: false,
				noMore: false
			}
		},
		mounted() {
			//获取栏目元素，并获取初始化宽度，添加滚动监听事件
			channelBar = document.querySelector('.channel .el-tabs__nav-wrap');
			channelBarWidth = channelBar.offsetWidth;
			window.addEventListener('scroll', this.handleScroll);

			var display = $('.pagination-container').css("display");
			console.debug(display);
			if ("none" == display) {
				this.scrollQuery = true;
			}

			this.$api.channel.queryById(this.$route.query.id).then(channel => {
				this.channel = channel;
				this.activeMaterialId = channel.materials[0].id;
				this.query(1);
			});
		},
		computed: {
			disabled() {
				return this.loading || this.noMore
			}
		},
		methods: {
			choseChannel(tab, event) {
				console.debug("tab", tab.name);
				this.activeMaterialId = tab.name;
				this.query(1);
			},
			query(pageNo) {
				this.pageNo = pageNo;
				this.$api.channel.goods(pageNo, this.activeMaterialId).then(data => {
					//非滚动场景、或重新查询时，goods重新赋值
					if (this.scrollQuery == false || pageNo == 1) {
						this.goods = data;
						window.scrollTo(0, 0);
					} else {
						if (data == '') {
							this.noMore = true;
						} else {
							data.forEach(item => {
								this.goods.push(item);
							})
						}

						setTimeout(() => {
							this.loading = false;
						}, 2000)
					}
				});
			},
			//滚动条事件， 固定栏目
			handleScroll() {
				var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
				var offsetTop = channelBar.offsetTop
				if (scrollTop > 60 && scrollTop > offsetTop) {
					this.searchBarFixed = true
					channelBar.style.width = channelBarWidth + 'px'
				} else {
					this.searchBarFixed = false
				}
				var top = document.querySelector('#btm').offsetTop;
				var bottom = top - scrollTop - $(window).height();
				console.debug(scrollTop, offsetTop, top, $(window).height(), bottom)
				if (this.scrollQuery && bottom < 300 && this.loading == false) {
					this.loading = true;
					this.query(this.pageNo + 1)

				}
			}
		},
		destroyed() {
			window.removeEventListener('scroll', this.handleScroll)
		}
	}
</script>

<style>
	.isFixed {
		position: fixed;
	}

	.channel .isFixed .el-tabs__header {
		position: fixed;
	}

	.channel .isFixed .el-tabs__nav-wrap {
		position: fixed;
		background-color: #FFF;
		top: 60px;
	}
</style>
